import { UserOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { MenuRouter } from "../../router/router";
import { useNavigate } from "react-router-dom";
import { Outlet } from "react-router-dom";
import { RetweetOutlined } from "@ant-design/icons";
function Home() {
  const { Header, Content, Sider } = Layout;
  const navigate = useNavigate();
  // 顶部导航菜单
  const items1: MenuProps["items"] = MenuRouter.map((key) => ({
    key: key.path,
    label: `${key.meta.title}`,
  }));
  const db = (e: any) => {
    navigate(e.key);
  };
  // 侧边导航菜单
  const items2: MenuProps["items"] = [UserOutlined].map((icon, index) => {
    const key = String(index + 1);

    return {
      key: `sub${key}`,
      icon: <RetweetOutlined />,
      label: `subnav ${key}`,

      children: MenuRouter.map((item) => {
        return {
          key: item.path,
          icon: <RetweetOutlined />,
          label: `${item.meta.title}`,
        };
      }),
    };
  });
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <div>
      <Layout>
        <Header style={{ display: "flex", alignItems: "center" }}>
          <div className="demo-logo" />
          {/* 顶部导航菜单 */}
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={["2"]}
            items={items1}
            style={{ flex: 1, minWidth: 0 }}
            onClick={db}
          />
        </Header>
        <Layout>
          <Sider width={200} style={{ background: colorBgContainer }}>
            {/* 侧边导航菜单 */}
            <Menu
              mode="inline"
              defaultSelectedKeys={["1"]}
              defaultOpenKeys={["sub1"]}
              style={{ height: "100%", borderRight: 0 }}
              items={items2}
              onClick={db}
            />
          </Sider>
          <Layout style={{ padding: "0 24px 24px" }}>
            <Breadcrumb
              style={{ margin: "16px 0" }}
              items={[
                {
                  title: "首页",
                },
                {
                  title: <a href="/list">列表页</a>,
                },
                {
                  title: <a href="/Xiang">详情页</a>,
                },
                {
                  title: <a href="/Language">I18n 国际化</a>,
                },
                {
                  title: <a href="/Table">Tab表格</a>,
                },
                {
                  title: <a href="/Bq">标签分类</a>,
                },
              ]}
            />
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              <Outlet />
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default Home;
